<template>
  <el-form
    class="mb-10px mt-20px flex"
    @submit.prevent
    :model="formOption"
    ref="formRef"
    :inline="true"
  >
    <el-form-item label="详细信息:" prop="keyword">
      <ns-input
        v-model="formOption.keyword"
        placeholder="请输入查询的详细信息"
        clearable
        style="width: 200px"
      />
    </el-form-item>
    <el-form-item label="日志级别:" prop="level">
      <el-select placeholder="请选择日志级别" v-model="formOption.level" clearable>
        <el-option
          v-for="item in logLevelList"
          :key="'logLevel' + item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <div class="flex-1"></div>
    <el-form-item style="margin-right: 0">
      <el-button type="primary" @click="query">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </el-form-item>
  </el-form>
  <div>
    <AsyncTable
      ref="tableRef"
      class="risk-type-table"
      :max-height="500"
      :columns="tableOption"
      :fetchData="fetchData"
    />
  </div>
</template>
<script setup lang="jsx">
import { getLogList } from '@/api/asset/taskManage/database'
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
const { proxy } = getCurrentInstance()
const route = useRoute()

const props = defineProps({
  historyId: {
    type: String,
    default: ''
  }
})
const logLevelList = ref([
  { label: 'TRACE', value: 'TRACE' },
  { label: 'DEBUG', value: 'DEBUG' },
  { label: 'INFO', value: 'INFO' },
  { label: 'WARN', value: 'WARN' },
  { label: 'ERROR', value: 'ERROR' },
  { label: 'FATAL', value: 'FATAL' }
])
const tableRef = ref(null)
const formOption = reactive({
  keyword: '',
  level: ''
})

const tableOption = reactive([
  {
    prop: 'level',
    label: '日志级别',
    'min-width': 120
  },
  {
    prop: 'msg',
    label: '详细信息',
    'min-width': 160,
    'show-overflow-tooltip': true
  }
])

watch(
  () => props.historyId,
  () => {
    query()
  }
)

async function fetchData({ page, pageSize }) {
  const res = await getLogList({
    ...formOption,
    pageSize,
    page,
    collectionAssetId: route.query.collectionAssetId,
    historyId: props.historyId
  })
  return {
    data: res.data,
    count: res.count
  }
}
const resetSearch = () => {
  proxy.$refs.formRef.resetFields()
  query()
}
const query = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
</script>
